
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>


  <title>Coding | Simple Life</title>

  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
  <meta name="author" content="fullahead.org" />
  <meta name="keywords" content="XHTML, CSS, template, FullAhead" />
  <meta name="description" content="A valid, XHTML 1.0 template" />
  <meta name="robots" content="index, follow, noarchive" />
  <meta name="googlebot" content="noarchive" />

  <link rel="stylesheet" type="text/css" href="../style/html.css" media="screen, projection, tv " />
  <link rel="stylesheet" type="text/css" href="../style/layout.css" media="screen, projection, tv" />
  <link rel="stylesheet" type="text/css" href="../style/print.css" media="print" />

  <!-- Conditional comment to apply opacity fix for IE #content background.
       Invalid CSS, but can be removed without harming design -->
  <!--[if gt IE 5]>
  <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection, tv " />
  <![endif]-->

</head>


<body>

<!-- #wrapper: centers the content and sets the width -->
<div id="wrapper">

  <!-- #content: applies the white, dropshadow background -->
  <div id="content">

    <!-- #header: holds site title and subtitle -->
    <div id="header">
      <h1><span class="big darkBrown">S</span>imple <span class="big darkBrown">L</span>ife</h1>
      <h2><span class="highlight">Because sometimes you don't need a sidebar</span></h2>
    </div>



    <!-- #menu: topbar menu of the site.  Use the helper classes .two, .three, .four and .five to set
                the widths for 2, 3, 4 and 5 item menus. -->
    <ul id="menu" class="four">
      <li><a href="index.html" title="An intro to Simple Life"><span class="big">I</span>ntro</a></li>
      <li><a href="coding.html" title="Coding tips" class="here"><span class="big">C</span>oding</a></li>
      <li><a href="styles.html" title="See the tags in action"><span class="big">S</span>tyles</a></li>
      <li><a href="http://fullahead.org/contact.html" title="Get in touch"><span class="big">C</span>ontact</a></li>
    </ul>

    <!-- #page: holds all page content, as well as footer -->
    <div id="page">

      <h1>Coding</h1>


      <h2>PNG Opacity</h2>

      <p>
        One of IE's more annoying bugs is that it doesn't support PNG opacity unless you use a big chunk of ugly code.  To create the dropshadow effect in IE, the following filter is applied in ie.css:
      </p>


      <code><span class="green">/* takes care of IE and its support for transparent .png */</span><br/>#content {<br/>  background: none;<br/>  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg/content.png',sizingMethod='scale');<br/>}</code>

      <p>
        Since no other browers understand this, it's applied using a <a href="http://www.quirksmode.org/css/condcom.html" title="Read about conditional comments">conditional comment</a>.  It's invalid CSS and if you don't want to use it, you'll just loose the content area dropshadow.
      </p>


      <h2>Column Widths</h2>

      <p>
        There are 6 different widths defined in the style sheet that allow you to customize how many columns the template has:
      </p>

      <ul>
        <li><b>width25</b> 25 percent width</li>
        <li><b>width33</b> 33 percent width</li>
        <li><b>width50</b> 50 percent width</li>
        <li><b>width66</b> 66 percent width</li>
        <li><b>width75</b> 75 percent width</li>
        <li><b>width100</b> 100 percent width</li>
      </ul>

      <p>
        To use them, create a &lt;div&gt; tag and apply the class.  To position the columns, use the <i>floatLeft</i> and <i>floatRight</i> classes.  This is possible because you can stack CSS classes on an element.  Follow <a href="styles.html#widthDemo" title="View width demo">this link</a> to see examples.
      </p>

      <blockquote class="stop">
        <p>
          If you want columns to be side by side, make sure the widths added up don't go over 100 percent.  If they do, the <b>rightmost column</b> will be pushed down.
        </p>
      </blockquote>

      <p>
        Below is an example of the skeleton code used to generate a 2 column layout:
      </p>

      <code>&lt;div class="width33 floatLeft"&gt;<br/>  Left Column content<br/>&lt;/div&gt;<br/><br/>&lt;div class="width66 floatRight"&gt;<br/>  Right Column content<br/>&lt;/div&gt;</code>



      <h2>Images</h2>
      <p>
        <a href="http://fullahead.org/work/alice/" title="Visit Alice's Cabin"><img src="img/photos/tn_stream.jpg" alt="Adirondack Stream" class="floatLeft"/></a>
        Images are fully supported using the <i>floatLeft</i> and <i>floatRight</i> classes.  Just apply one of them to the image you want to position.  Images that have link tags around them will also have a nifty rollover effect, as long as you're using a standards complients browser.
      </p>


      <!-- .footer: the site footer text, links and whatever else -->
      <p class="footer">
        Design by <a href="http://fullahead.org" title="Visit FullAhead">FullAhead</a>.  Valid CSS &amp; XHTML with no rights reserved.
      </p>

    </div>

  </div>

</div>

</body>

</html>